<template>

  <div style="width: 100%; height: 100%;">

    <div style="display: flex; width: 400px; margin-top: 20px;margin-left: 30px;margin-bottom: 20px;">

      <el-input placeholder="请输入要查询的部门" v-model="departmentName"></el-input>

      <el-button type="primary" style="margin-left: 20px;" @click="selectlist">查询</el-button>

      <el-button type="primary" @click="centerDialogVisible = true">新增</el-button>


    </div>


    <el-table :data="tableData" style="width: 100%; margin-left: 30px;">
      <!-- <el-table-column fixed prop="date" label="Date" width="150" /> -->

      <el-table-column prop="departmentId" label="部门Id" width="120" />
      <el-table-column prop="departmentName" label="部门名字" width="120" />
      <el-table-column prop="userCount" label="部门人数" width="120" />
      <el-table-column prop="positionCount" label="职位个数" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="120" />
      <el-table-column prop="updateTime" label="更新时间" width="120" />
      <el-table-column fixed="right" label="Operations" min-width="120">


        <template #default="scope">
          <el-button type="primary" @click="openUpdateDialog(scope.row.departmentId)" >修改</el-button>

          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"
            title="Are you sure to delete this?" @confirm="() => deleteButton(scope.row.departmentId)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>


      </el-table-column>
    </el-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 16px; margin-right: 150px;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="CurrentPage"
        :page-sizes="[1, 2, 3, 10, 100]" :page-size="size" background layout="total,sizes,prev, pager, next"
        :total="total">
      </el-pagination>
    </div>


    <el-dialog v-model="centerDialogVisible" title="新增部门数据" width="500" center>

      <el-form>
        <el-form-item>
          <el-input placeholder="请输入新增部门名字" v-model="Name" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">确认</el-button>
        </div>
      </template>
    </el-dialog>


    <el-dialog v-model="Visible" title="修改部门数据" width="500" center>

      <el-form>
        <el-form-item>
          <el-input placeholder="请输入修改部门的名字" v-model="ChangeName" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Visible = false">取消</el-button>
          <el-button type="primary" @click="update">确认</el-button>
        </div>
      </template>
    </el-dialog>

  </div>



</template>


<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { DELETE, GET, POST, PUT } from '../../../api';

let tableData = ref([])
let size = ref(10)
let CurrentPage = ref(1)
let total = ref(0)

let departmentName = ref("")

async function selectlist() {
  let res = await GET('http://localhost:9999/department/select', { departmentName: departmentName.value, size: size.value, page: CurrentPage.value })
  tableData.value = res.data.list
  total.value = res.data.total
  console.log(res)
}



//修改当前页
function currentChange(_page) {
  CurrentPage.value = _page
  selectlist()
}
//修改每页大小
function sizeChange(_size) {
  size.value = _size
  CurrentPage.value = 1
  selectlist()
}

//删除部门功能
async function deleteButton(id) {
  console.log(id)
  let res = await DELETE('http://localhost:9999/department/delete', { departmentId: id })
  if (res.data.num != 0) {
    alert("删除成功")
    await selectlist()
  }
}

//新增部门功能
let centerDialogVisible = ref(false)
let Name = ref("")
async function add() {
  let res = await POST('http://localhost:9999/department/add', {
    departmentName: Name.value
  })
  console.log(res)

  centerDialogVisible.value = false
  selectlist()
}


//修改部门功能
let departmentId = ref("")

let Visible = ref(false)
let ChangeName = ref("")

async function openUpdateDialog(id) {
  departmentId.value = id
  console.log(id)
  Visible.value = true
}

async function update() {
  // console.log(ChangeName)
  let res = await PUT('http://localhost:9999/department/update',{
    departmentName:ChangeName.value,
    departmentId:departmentId.value
  })
  Visible.value = false
  if (res.data != 0) {
    alert("修改成功")
    selectlist()
  }
  
}

onMounted(async () => {
  await selectlist()
})

</script>